<template>
    <div>
        <img :src="musicList.al.picUrl" alt="" class="bgimg" />
        <div class="MusicDitails flex-column d-flex jc-between">
            <div class="detial-top d-flex p-3 mt-2">
                <div class="dt-left d-flex flex-1">
                    <span class="out">
                        <svg class="icon" aria-hidden="true" @click="backHome">
                            <use xlink:href="#icon-zuojiantou-copy"></use>
                        </svg>
                    </span>
                    <div class="title ml-3">
                        <div class="name text-white">
                            {{ musicList.name }}
                        </div>
                        <div class="author text-grey-1">
                            <span v-for="item in musicList.ar" :key="item.id">{{
                                item.name
                            }}</span>
                            &gt;
                        </div>
                    </div>
                </div>
                <div class="share">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenxiang-copy"></use>
                    </svg>
                </div>
            </div>

            <!-- 磁盘 -->
            <div
                class="detial-content"
                v-if="!isLyricShow"
                @click="isLyricShow = !isLyricShow"
            >
                <img
                    src="@/assets/needle-ab.png"
                    alt=""
                    class="needle"
                    :class="{ 'needle-play': isPlay }"
                />
                <img src="@/assets/cd.png" alt="" class="cd" />
                <img
                    :src="musicList.al.picUrl"
                    alt=""
                    class="pic go"
                    :class="{
                        rotate_active: isPlay,
                        rotate_pause: !isPlay,
                    }"
                />
            </div>
            <!-- 歌词 -->
            <div
                ref="musicLyric"
                class="music-lyric d-flex flex-column text-center text-grey"
                v-if="isLyricShow"
                @click="isLyricShow = !isLyricShow"
            >
                <!-- {{lyric.lyric.split("\n")}} -->
                <!-- {{ lyricNew }} -->
                <p
                    :class="{
                        active:
                            item.time <= currentTime &&
                            item.nextTime >= currentTime,
                    }"
                    class="mt-4"
                    v-for="(item, i) in lyricNew"
                    :key="i"
                >
                    {{ item.lrc }}
                </p>
            </div>

            <!-- 底部icon -->
            <div class="detail-bottom d-flex flex-column jc-between mb-2">
                <div class="b-top d-flex jc-around">
                    <div class="icon-items">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-aixin-copy"></use>
                        </svg>
                    </div>
                    <div class="icon-items">
                        <svg class="icon" aria-hidden="true">
                            <use
                                xlink:href="#icon-xiazai-wenjianxiazai-07-copy"
                            ></use>
                        </svg>
                    </div>
                    <div class="icon-items">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-heijiaochangpian-copy"></use>
                        </svg>
                    </div>
                    <div class="icon-items">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xiaoxi-copy-copy"></use>
                        </svg>
                    </div>
                    <div class="icon-items">
                        <svg class="icon" aria-hidden="true">
                            <use
                                xlink:href="#icon-xunhuanjiagongcishu-copy"
                            ></use>
                        </svg>
                    </div>
                </div>
                <!-- 进度条 -->
                <div class="b-content">
                    <input type="range" name="" id="" class="range" min="0" :max="duration" v-model="currentTime">
                </div>

                <div class="b-bottom d-flex jc-around mb-0 ai-center">
                    <div class="icon-items">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-danquxunhuan"></use>
                        </svg>
                    </div>
                    <!-- 上一曲 -->
                    <div class="icon-items" @click="lastMusic">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xiayiqu101"></use>
                        </svg>
                    </div>
                    <!-- 播放暂停 -->
                    <div class="icon-items">
                        <svg
                            class="icon bofang"
                            aria-hidden="true"
                            v-if="!isPlay"
                            @click="play"
                        >
                            <use xlink:href="#icon-bofang2-copy"></use>
                        </svg>
                        <svg
                            class="icon bofang"
                            aria-hidden="true"
                            v-else
                            @click="play"
                        >
                            <use xlink:href="#icon-zanting-copy"></use>
                        </svg>
                    </div>
                    <!-- 下一曲 -->
                    <div class="icon-items" @click="nextMusic">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shangyiqu101-copy"></use>
                        </svg>
                    </div>
                    <div class="icon-items">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-liebiao-copy"></use>
                        </svg>
                    </div>
                </div>
            </div>
            <!-- {{ music }} -->
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
    name: "MusicDetail",
    props: ["musicList", "play"],
    data() {
        return {
            isLyricShow: false,
        };
    },
    computed: {
        ...mapState([
            "lyric",
            "currentTime",
            "duration",
            "playListIndex",
            "playList",
            "isPlay",
        ]),
        //对歌词进行切割
        //
        lyricNew() {
            let arr = this.lyric.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
                let min = item.slice(1, 3);
                let second = item.slice(4, 6);
                let ms = item.slice(7, 10);
                let lrc = item.slice(11, item.length);
                let time = parseInt(min) * 60 + parseInt(second);
                if (isNaN(Number(ms))) {
                    ms = item.slice(7, 9);
                    lrc = item.slice(10, item.length);
                }
                // console.log(min, second, ms, lrc);
                return { min, second, ms, lrc, time };
            });
            // 最后还有一个多余 元素为空 会影响 time 的值我们删去他
            arr.splice(arr.length - 2, arr.length - 1);
            // 给每行歌词元素添加 下一行时间
            arr.forEach((item, i) => {
                if (i === arr.length - 1) {
                    item.nextTime = this.duration;
                } else {
                    item.nextTime = arr[i + 1].time;
                }
            });
            return arr;
        },
    },
    methods: {
        backHome() {
            this.UPDATEDETAILSHOW();
            this.isLyricShow = false;
        },
        lastMusic() {
            if (this.playList.length > 1) {
                let index = this.playListIndex - 1;
                if (index < 0) {
                    index = this.playList.length - 1;
                }
                this.UPDATEISPLAY(true);
                this.UPDATEPLAYLISTINDEX(index);
            }
        },
        nextMusic() {
            if (this.playList.length > 1) {
                let index = this.playListIndex + 1;
                if (index > this.playList.length - 1) {
                    index = 0;
                }
                this.UPDATEISPLAY(true);
                this.UPDATEPLAYLISTINDEX(index);
            }
        },
        ...mapMutations([
            "UPDATEDETAILSHOW",
            "UPDATEPLAYLISTINDEX",
            "UPDATEISPLAY",
        ]),
    },
    watch: {
        currentTime() {
            let p = document.querySelector("p.active");
            // console.log(p);
            if (p) {
                // console.log([p.offsetTop]);
                if (p.offsetTop > 300) {
                    // console.log(777);
                    this.$refs.musicLyric.scrollTop = p.offsetTop - 300;
                }
                // console.log([this.$refs.musicLyric.scrollTop]);
            }
            if(this.currentTime === this.duration) {
                this.nextMusic()
            }
        },
    },
    updated() {
        // console.log(this.lyric.lyric);
    },
    mounted() {
        // console.log(this.lyricNew);
    },
};
</script>

<style lang="less">
.bgimg {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1000;
    filter: blur(70px);
}
.MusicDitails {
    height: 100vh;
    .detial-content {
        width: 100%;
        height: 8.6rem;
        .go {
            //匀速 循环
            animation: rotate 10s linear infinite;
        }
        .rotate_active {
            animation-play-state: running;
        }
        .rotate_pause {
            animation-play-state: paused;
        }
        @keyframes rotate {
            0% {
                transform: rotateZ(0deg);
            }
            100% {
                transform: rotateZ(360deg);
            }
        }
        .pic {
            width: 3.06rem;
            height: 3.06rem;
            border-radius: 50%;
            position: absolute;
            margin: 0 auto;
            left: 30%;
            top: 28.3%;
        }
        .cd {
            width: 4.76rem;
            height: 4.76rem;
            position: absolute;
            transform: translate(-50%, -50%);
            left: 50%;
            top: 40%;
        }
        .needle {
            position: absolute;
            top: 7%;
            left: 50%;
            transform-origin: left top;
            transform: rotate(-5deg);
            width: auto;
            height: 3.1rem;
            z-index: 999;
            transition: all 2s;
        }
        .needle-play {
            position: absolute;
            top: 7%;
            left: 50%;
            transform-origin: left top;
            transform: rotate(5deg);
            width: auto;
            height: 3.1rem;
            z-index: 999;
            transition: all 2s;
        }
    }
    .music-lyric {
        height: 8rem;
        //记住这两个属性处理滚动很重要
        overflow: hidden;
        overflow: scroll;
        p {
            &.active {
                color: #fff;
                font-size: 0.5rem;
            }
        }
    }
    .detail-bottom {
        height: 3rem;
        .b-top {
            .icon-items {
                .icon {
                    height: 0.6rem;
                    width: 0.6rem;
                }
            }
        }
        .b-bottom {
            .bofang {
                height: 1rem;
                width: 1rem;
            }
        }
        .range {
            width: 100%;
            height: 0.1rem;
            background-color: lightblue;
        }
    }
}
</style>